<template>
  <Box :title="detailTitle" class="flow-boundary-detail" direction="row">
    <!-- 摄像机  市界显示,省界隐藏 -->
    <Panel class="camera" second title="G2_K1000+900_南京方向" align="center" v-if="areaType == 'city'">
      <Switch :list="[]"></Switch>
    </Panel>

    <!-- 流量统计 -->
    <FlowStatistical
      :todayTotal="todayTotal"
      :sameData="sameData"
      :typeArr="typeArr"
      :xDate="xDate"
      :seriesData="seriesData"
    ></FlowStatistical>

    <!-- 客货分析 -->
    <GuestVansAnalysis
      :pieChartData="pieChartData"
      :guestAccounted="guestAccounted"
      :vansAccounted="vansAccounted"
      :titleShow="titleShow"
      :bottomShow="bottomShow"
      :colorList="colorList"
    >
    </GuestVansAnalysis>

    <!-- 省内目的地TOP5   省界显示,市界隐藏-->
    <TopCity class="rank-city" :rinkList="provinceList" v-if="areaType == 'province'"></TopCity>
    <TopCity class="rank-city" :rinkList="sourceList" title="来源地TOP5" v-if="areaType == 'province'"></TopCity>
  </Box>
</template>

<script>
export default {
  name: 'FlowBoundaryDetail'
}
</script>
<script setup>
/**
 * @desc 省界通道详情/边界通道详情(三级)
 * @auther 阳坤
 * @date 2022/10/22
 *
 **/

import Box from '../../components/detail/Box.vue'
import Panel from '../../components/panel'
import GuestVansAnalysis from '../../components/detail/GuestVansAnalysis.vue'
import FlowStatistical from '../../components/detail/FlowStatistical.vue'
import TopCity from '../../components/top-city/index.vue'
import Switch from '../../components/detail/Switch.vue'
import flowApi from '../../api/flow.js'
import baseServiceApi from '../../api/base-service.js'

import { ref, onMounted, toRefs, watch } from 'vue'

const props = defineProps({
  // 省界/市界
  areaType: {
    type: String,
    default: 'province' // province city
  }
})

onMounted(() => {
  init()
})

const { areaType } = toRefs(props)

// 详情标题
const detailTitle = ref()

// 今日累计流量
const todayTotal = ref()
// 同环比
const sameData = ref({})
// echarts 分类、x轴数据、折线数据
const typeArr = ref([
  { name: '入省', icon: 'rect' },
  { name: '出省', icon: 'rect' }
])
const xDate = ref()
const seriesData = ref([
  {
    name: '入省',
    gradientColor: [
      { offset: 0, color: 'rgb(183, 206, 250)' },
      { offset: 1, color: 'rgb(210, 229, 250)' }
    ],
    color: '#4287FE',
    data: []
  },
  {
    name: '出省',
    gradientColor: [
      { offset: 0, color: 'rgb(153, 203, 245)' },
      { offset: 1, color: 'rgb(203, 226, 249)' }
    ],
    color: '#00B5CA',
    data: []
  }
])

// 客货分析- 客车占比、货车占比以及饼图数据
const guestAccounted = ref()
const vansAccounted = ref()
const pieChartData = ref([])
const colorList = ref([])
// 控制客货分析- legend是否显示
const titleShow = ref(false)
const bottomShow = ref(false)

// 省内目的地集合
const provinceList = ref([])
// 来源地集合信息
const sourceList = ref([])

const videoList = ref([
  'http://xzhglcplay.gandongyun.com/live/SXJ000000002804.flv?sign=bf458618d17c06cf19caf2dbca0cfbc2&t=6364C44A'
])

/**
 * 初始化
 */
const init = () => {
  getData()
}

/**
 * 获取数据
 */
const getData = () => {
  if (areaType.value == 'province') {
    // 省界详情
    titleShow.value = false
    bottomShow.value = true
    flowApi.getProvincialChannelDetails(99999).then(res => {
      if (res.data) {
        detailTitle.value = '苏鲁省界'
        // 今日累计流量
        todayTotal.value = res.data.todayTotal
        // 同环比
        sameData.value = {
          ring: res.data.totalHb,
          same: res.data.totalTb
        }
        // echarts x轴数据、折线数据
        xDate.value = res.data.date
        seriesData.value[0].data = res.data.intoFlowRealTime
        seriesData.value[1].data = res.data.outFlowRealTime

        // 客货分析- 客车、货车值 kcOutTotal,hcOutTotal,kcIntoTotal,hcIntoTotal
        guestAccounted.value = ((res.data.kcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
        vansAccounted.value = ((res.data.hcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
        pieChartData.value = [
          { name: '入省货车', value: res.data.hcIntoTotal },
          { name: '出省货车', value: res.data.hcOutTotal },
          { name: '出省客车', value: res.data.kcOutTotal },
          { name: '入省客车', value: res.data.kcIntoTotal }
        ]
        colorList.value = ['#34d6e9', '#19bbce', '#266BF4', '#4287fe']

        // 省内目的地集合
        provinceList.value = res.data.provincialDestinationList
        // 来源地集合信息
        sourceList.value = res.data.sourceList
      }
    })
  } else if (areaType.value == 'city') {
    // 市界详情
    titleShow.value = true
    bottomShow.value = false
    flowApi.getBoundaryChannelDetails(8888).then(res => {
      if (res.data) {
        detailTitle.value = 'XXXX通道'
        // 今日累计流量
        todayTotal.value = res.data.todayTotal
        // 同环比
        sameData.value = {
          ring: res.data.totalHb,
          same: res.data.totalTb
        }
        // echarts x轴数据、折线数据
        typeArr.value = [
          { name: '出境', icon: 'rect' },
          { name: '入境', icon: 'rect' }
        ]
        xDate.value = res.data.date
        seriesData.value[0].data = res.data.intoFlowRealTime
        seriesData.value[0].name = '出境'
        seriesData.value[1].data = res.data.outFlowRealTime
        seriesData.value[1].name = '入境'
        colorList.value = ['#19bbce', '#266BF4']

        // 客货分析- 客车、货车值 kcOutTotal,hcOutTotal,kcIntoTotal,hcIntoTotal
        guestAccounted.value = ((res.data.kcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
        vansAccounted.value = ((res.data.hcTotal / (res.data.kcTotal + res.data.hcTotal)) * 100).toFixed(1)
        pieChartData.value = [
          { name: '货车', value: res.data.hcTotal },
          { name: '客车', value: res.data.kcTotal }
        ]
      }
    })

    // 获取摄像机列表
    const params = {
      kmStake: '200',
      hmStake: '500',
      lon: '118.96',
      lat: '32.08',
      roadNum: 'G25',
      radius: '2',
      province: '32',
      city: '',
      roadType: 2
    }
    baseServiceApi.getCameraList(params).then(res => {
      console.log(res.data)
    })
  }
}

/**
 * 监听id变化
 */
// watch(
//   () => props.data.provincialName,
//   (newVal, oldVal) => {
//     getData()
//   },
//   { deep: true }
// )
</script>

<style scoped lang="less">
@import url(../../styles/themes/index.less);

.flow-boundary-detail {
  .camera {
    width: 30%;
  }

  .detail-box-content {
    justify-content: space-between;
  }

  .rank-city {
    width: 18%;
  }
}
</style>
